<template>
  <view>
    <view style="margin-top: 60rpx;width: 90%;margin-left: 5%;">
      <u-search :clearabled="true" v-model="keyWords" @search="searchCourse()"></u-search>
    </view>

    <view style="width: 90%; height: 60vh; margin-top: 100rpx; margin-left: 5%;">
      <!-- 使用 scroll-view 包裹表格以允许滚动 -->
      <scroll-view scroll-y="true" style="height: 100%;">
        <table style="width: 100%;">
          <thead>
          <tr style="background-color: #ccc;">
            <th>课程序号</th>
            <th>课程名</th>
            <th>描述</th>
            <th>学分</th>
            <th>上课周</th>
            <th>剩余容量</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.courseName }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.studyScore }}</td>
            <td>{{ item.startWeek }} ~ {{ item.endWeek }} 周</td>
            <td>{{ item.remain }}</td>
            <td><button @click="chooseCourse(item.id)">选课</button></td>
          </tr>
          </tbody>
        </table>
      </scroll-view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import store from '@/store'
import student from "../../api/student";
export default {
  data() {
    return {
      keyWords: '',
      tableData: [{
        id: 0,
        courseName: '',
        description: '',
        studyScore: '',
        startWeek: '',
        remain: 0
      }],

    }
  },
  methods: {
    async allCourses() {
      try {
        const res = await student.selectAllCourses()
        this.tableData = res.data
        // 处理响应数据
        console.log('课程数据:', res.data)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    async searchCourse () {
      try {
        const res = await student.searchCourses(this.keyWords)
        this.tableData = res.data
        // 处理响应数据
        console.log('搜索数据:', res)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    async chooseCourse(id) {
      try {
        const res = await student.stuChooseCourse(id)
        console.log('选课结果:', res)
        if (res.code == 200) {
          uni.showToast({
            title: res.data,
            icon: 'success', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
          await this.allCourses()
        }
        else {
          uni.showToast({
            title: res.data,
            icon: 'none', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
        }
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    }
  },
  async onLoad () {
    await this.allCourses()
  }
}
</script>
<style>
button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 95%;
  font-size: 12px;
  padding: 5rpx;
}
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* 确保表格列宽固定 */
  font-size: 14px;
}

/* 表头单元格样式 */
th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
  height: 40px; /* 固定表头高度 */
  vertical-align: middle;
}

/* 表格数据单元格样式 */
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
  height: 40px; /* 固定行高 */
  vertical-align: middle;
  overflow: hidden; /* 隐藏超出内容 */
  text-overflow: ellipsis; /* 超出内容显示省略号 */
}


/* 确保 scroll-view 中的内容不会超出容器 */
scroll-view {
  overflow-y: auto; /* 显示垂直滚动条 */
  -webkit-overflow-scrolling: touch; /* 使滚动更平滑（适用于 iOS） */
}
</style>